<template>
<div>
  <header class="hd-top">
    <span class="iconfont icon-left" @click="goBack"></span>
    <h2 class="title" v-if="type=='1'">新增商品</h2>
    <h2 class="title" v-if="type=='2'">{{edit?'编辑商品':'商品详情'}}</h2>
    <button class="btn" @click="submit">{{edit?'保存':'编辑'}}</button>
  </header>
  <div class="page">
    <div class="form-wrap mb30">
      <div class="displayflex form-item">
        <div class="label">商品名称</div>
        <div class="flex1 ctx">
          <input type="text" class="txt-rit" v-model="goodsName" v-if="edit">
          <div class="txt-rit" v-if="!edit">{{goodsName}}</div>
        </div>
      </div>
      <div class="displayflex form-item">
        <div class="label">商品编号</div>
        <div class="flex1 ctx">
          <input type="text" class="txt-rit" v-model="goodsNum" v-if="edit">
          <div class="txt-rit" v-if="!edit">{{goodsNum}}</div>
        </div>
      </div>
      <div class="displayflex form-item">
        <div class="label">商品厂家</div>
        <div class="flex1 ctx">
          <input type="text" class="txt-rit" v-model="cpy" v-if="edit">
          <div class="txt-rit" v-if="!edit">{{cpy}}</div>
        </div>
      </div>
      <div class="displayflex form-item" v-if="!edit">
        <div class="label">商品类别</div>
        <div class="flex1 ctx">
          <div class="txt-rit">{{classfiyTxt}}</div>
        </div>
      </div>
      <div class="displayflex form-item" v-if="edit">
        <popup-picker class="picker-wrap" 
              title="商品类别" 
              :data="classfiyList" 
              placeholder="点击选择" 
              value-text-align="right"
              :show-name="classfiyshow"
              v-model="classfiy"></popup-picker>
        <i class="iconfont icon-right"></i>
      </div>
      <div class="displayflex form-item">
        <div class="label">商品单价</div>
        <div class="flex1 ctx">
          <input type="text" class="txt-rit" v-model="goodsPrice" v-if="edit">
          <div class="txt-rit" v-if="!edit">{{goodsPrice}}</div>
        </div>
      </div>
      <div class="displayflex form-item">
        <div class="label">批准文号</div>
        <div class="flex1 ctx">
          <input type="text" class="txt-rit" v-model="license" v-if="edit">
          <div class="txt-rit" v-else>{{license}}</div>
        </div>
      </div>
      <div class="displayflex form-item">
        <div class="label">包装含量</div>
        <div class="flex1 ctx">
          <input type="text" class="txt-rit" v-model="content" v-if="edit">
          <div class="txt-rit" v-if="!edit">{{content}}</div>
        </div>
      </div>
      <div class="displayflex form-item">
        <div class="label">包装单位</div>
        <div class="flex1 ctx">
          <input type="text" class="txt-rit" v-model="unit" v-if="edit">
          <div class="txt-rit" v-else>{{unit}}</div>
        </div>
      </div>
    </div>
    <div class="form-wrap2 mb30">
      <p class="txt">添加商品图片</p>
      <uploader-imgs></uploader-imgs>
    </div>
  </div>
  <div class="btn-bottom"><div class="btn" @click="submit">{{edit?'保存':'编辑'}}</div></div>
</div>
</template>
<script>
import uploaderImgs from '@/components/share/uploaders.vue';
export default {
  components:{
    uploaderImgs,
  },
  data(){
    return {
      goodsName:'',
      goodsNum:'',
      goodsPrice:'',
      license:'',
      content:'',
      unit:'',
      edit:false,
      cpy:'',
      //商品类型
      classfiyshow: true,
      classfiyTxt:'',
      classfiy: [],
      classfiyList: [
        [
          {
            value: "04",
            name: "药品"
          },
          {
            value: "01",
            name: "普耗"
          },
          {
            value: "02",
            name: "跟台高值"
          },
          {
            value: "03",
            name: "备货高值"
          },
          {
            value: "05",
            name: "后勤物资"
          },
          {
            value: "06",
            name: "消毒用品"
          },
          {
            value: "07",
            name: "洗涤用品"
          },
          {
            value: "08",
            name: "中药材"
          },
          {
            value: "09",
            name: "设施设备"
          },
          {
            value: "10",
            name: "其他"
          }
        ]
      ],
      Guid:'',
    }
  },
  computed:{
    userinfo(){
      if(localStorage.UserInfo){
        return JSON.parse(localStorage.UserInfo)
      };
    },
    type(){
      return this.$route.query.type || '';
    }
  },
  created(){
    if(this.type == '2'){
      this.edit = false;
      this.getdata();
    }else{
      this.edit = true;
    };
  },
  watch:{
    classfiy(val){
      this.findTxt(val);
    }
  },
  methods:{
    findTxt(val){
      var list = this.classfiyList[0];
      for(var i=0;i<list.length;i++){
        if(list[i].value==val[0]){
          this.classfiyTxt = list[i].name;
        }
      };
    },
    getdata(){
      if(sessionStorage.usersgoodsItem){
        var item = JSON.parse(sessionStorage.usersgoodsItem);
        this.goodsName = item.GoodsName;
        this.goodsNum = item.GoodsCode;
        this.cpy = item.Producer;
        this.GoodsType = item.GoodsType;
        this.classfiy.push(item.GoodsType);
        this.goodsPrice = item.Price;
        this.license = item.RegistKey;
        this.content = item.MinUnitQty;
        this.unit = item.MinUnitStyle;
        this.findTxt(this.classfiy);
        this.Guid = item.Guid;
      };
    },
    goBack(){
      this.$router.go(-1);
    },
    submit(){
      this.edit = !this.edit;
      if(this.edit){
        return false;
      }
      var _this = this,
          txt = '';
      var query = {
        GoodsName:this.goodsName,
        GoodsCode:this.goodsNum,
        GoodsType:this.classfiy[0],
        Price:this.goodsPrice,
        RegistKey:this.license,
        MinUnitQty:this.content,
        MinUnitStyle:this.unit,
        LoginedStaffID:this.userinfo.StaffID,
        LoginedName:this.userinfo.Name,
        Producer:this.cpy,
        IsDeleted:'N'
      }
      if(this.type == '2'){
        query.Guid =  this.Guid;
        txt = '编辑成功'
      }else if(this.type == '1'){
        txt = '新增成功'
      }
      this.Ajax.post("OperateGoodsAPI", query).then(function(resp) {
        if(resp.IsSuccess){
          _this.$vux.toast.show({
            type:'success',//success, warn, cancel, text
            text: txt
          })
        }
      });
      
    }
  },
}
</script>